<template>
    <div class="website-management-page">
        <span class="page-title">网站管理</span>

        <div class="fliter">
            <div class="filter-item">
                <span class="filter-label" style="font-size: 14px;min-width:60px;">网站域名：</span>
                <el-input v-model="searchDomain" style="width: 200px;" placeholder="请输入域名查询" clearable />
            </div>
            <div class="filter-item">
                <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
            </div>
        </div>
        <div class="article-table">
            <el-button type="primary" @click="showAddDialog">+ 新增运营配置</el-button>
            <el-table :data="tableData" v-loading="loading"
                :header-cell-style="{ background: '#fafafa', height: '56px', }"
                style="width: 100%;margin-top: 20px;margin-bottom: 20px; height: calc(100% - 70px);">
                <template v-for="(item, index) in tableHeader" :key="index">
                    <el-table-column :prop="item.prop" :label="item.label" :min-width="item.width"
                        :formatter="item.formatter" />
                </template>
                <el-table-column label="操作" width="300" align="center" fixed="right">
                    <template #default="{ row }">
                        <div style="display: flex;align-items: center;gap: 15px;flex-wrap: wrap;">
                            <span style="cursor: pointer;color: #1677ff;" @click="showDetailDialog(row)">查看详情</span>
                            <span style="cursor: pointer;color: #1677ff;" @click="showEditDialog(row)">修改配置</span>
                            <span style="cursor: pointer;color: #F56C6C;" @click="handleDelete(row)">删除</span>
                            <span style="cursor: pointer;color: #1677ff;" @click="handleReview(row)">review</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
                style="display: flex;justify-content: end;" layout="total,prev, pager, next,sizes" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- 新增/编辑配置对话框 -->
        <WebsiteConfigDialog 
            v-model="dialogVisible" 
            :is-edit-mode="isEditMode" 
            :edit-data="configForm"
            @submit="handleConfigSubmit" 
            @cancel="handleConfigCancel" 
        />

        <!-- 查看详情对话框 -->
        <WebsiteDetailDialog 
            v-model="detailDialogVisible" 
            :detail-data="currentConfig" 
        />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import service from '../../config'
import WebsiteConfigDialog from './WebsiteConfigDialog.vue'
import WebsiteDetailDialog from './WebsiteDetailDialog.vue'

// 搜索相关
const searchDomain = ref('')
const loading = ref(false)

const tableHeader = ref([
    { label: '域名', prop: 'domain', width: 200, formatter: (row: any) => row.domain?.length > 0 ? row.domain : '-' },
    { label: '网站主题', prop: 'area', width: 200, formatter: (row: any) => row.area?.length > 0 ? row.area : '-' },
    { label: '内容站/投流站', prop: 'type', width: 200, formatter: (row: any) => row.type?.length > 0 ? row.type : '-' },
])

// 表格数据
const tableData = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 对话框相关
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const isEditMode = ref(false)
const currentConfig = ref<any>(null)

// 表单数据
const configForm = ref({
    id: '',
    domain: '',
    privacyPolicy: '',
    userManual: '',
    Imprint: '',
    contact: '',
    uiTemplate: '',
    isRsoc: '0',
    accountId: null,
    tagList: [],
    category: []
})

// 网站列表
const loadConfigList = async () => {
    loading.value = true
    service.post('/materialRecord/page', {
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
        .then(response => {
            tableData.value = response.data?.records || []
            total.value = response.data?.total || 0
        })
        .catch(error => {
            ElMessage.error(error?.message || '查询失败')
        }).finally(() => {
            loading.value = false
        })
}

const handleSearch = () => {
    pageNum.value = 1
    loadConfigList()
}

const handleSizeChange = (size: number) => {
    pageSize.value = size
    loadConfigList()
}

const handleCurrentChange = (page: number) => {
    pageNum.value = page
    loadConfigList()
}

const showAddDialog = () => {
    isEditMode.value = false
    configForm.value = {
        id: '',
        domain: '',
        privacyPolicy: '',
        userManual: '',
        Imprint: '',
        contact: '',
        uiTemplate: '',
        isRsoc: '0',
        accountId: null,
        tagList: [],
        category: []
    }
    dialogVisible.value = true
}

const showEditDialog = (row: any) => {
    isEditMode.value = true
    configForm.value = {
        id: row.id || '',
        domain: row.domain || '',
        privacyPolicy: row.privacyPolicy || '',
        userManual: row.userManual || '',
        Imprint: row.Imprint || '',
        contact: row.contact || '',
        uiTemplate: row.uiTemplate || '',
        isRsoc: row.isRsoc || '0',
        accountId: row.accountId || null,
        tagList: row.tagList || [],
        category: row.category || []
    }
    dialogVisible.value = true
}

const showDetailDialog = (row: any) => {
    currentConfig.value = row
    detailDialogVisible.value = true
}

// 对话框提交
const handleConfigSubmit = async (data: any) => {
    try {
        if (isEditMode.value) {
            await service.put(`/website/configs/${data.id}`, data)
            ElMessage.success('配置修改成功')
        } else {
            await service.post('/website/configs', data)
            ElMessage.success('配置新增成功')
        }

        dialogVisible.value = false
        loadConfigList()
    } catch (error: any) {
        ElMessage.error(error?.message || '操作失败')
        console.error('提交配置错误:', error)
    }
}

// 对话框取消
const handleConfigCancel = () => {
    dialogVisible.value = false
}

const handleDelete = (row: any) => {
    console.log(row)
}

const handleReview = (row: any) => {
    console.log(row)
}

onMounted(() => {
    loadConfigList()
})
</script>

<style lang="scss" scoped>
.website-management-page {
    background-color: #fff;
    height: calc(100% - 10px);
    padding: 30px;
    width: 100%;
    box-sizing: border-box;

    .page-title {
        font-size: 20px;
        font-weight: 600;
    }

    .fliter {
        display: flex;
        align-items: center;
        margin: 30px 0;
        flex-wrap: wrap;
        gap: 10px 12px;

        .filter-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
    }

    .el-button--primary {
        background-color: #1677ff;
    }
}

.article-table {
    margin-top: 20px;
    height: calc(100% - 180px);

    .config-table {
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
}

</style>
